<template>
  <section>
    <div class="sms-view">
      <img :src="iphoneTopImage" class="phone-header">
      <div v-if="smsContent" class="sms-content-box">
        <div class="sms-content" >{{smsContent}}</div>
      </div>
      <template v-else>
        <div class="sms-empty-init">
          <img :src="noDataImg"/>
          <el-button type="primary" class="sms-add-btn" @click="handleAddTemplate">添加短信模板</el-button>
        </div>
      </template>
    </div>
  </section>
</template>

<script>
import { getOssUrl } from '@src/util/assets'
const NO_DATA_IMG = getOssUrl('/no_data.png')
const iphoneTopImage = getOssUrl('/common/iphone-top.png')
export default {
  data(){
    return {
      iphoneTopImage
    }
  },
  computed: {
    noDataImg() {
      return NO_DATA_IMG
    }
  },

  props:{
    smsContent:{
      type:String,
      required:true
    }
  },
  methods: {
    handleAddTemplate() {
      this.$emit('handleAddTemplate')
    }
  }
}
</script>
<style lang="scss" scoped>

.sms-view{
    margin-top: 12px;
    width: 260px;
    height: 314px;
    background: #FFFFFF;
    box-shadow: 0px 9px 28px 8px rgb(0 0 0 / 5%), 0px 6px 16px 0px rgb(0 0 0 / 8%), 0px 3px 6px -4px rgb(0 0 0 / 12%);
    border-radius: 4px;

    .phone-header{
      padding: 0 10px;
      width: 100%;
      box-sizing: border-box;
    }
    .sms-content-box{
      border-radius: 12px;
      width: 200px;
      margin: 32px 12px 32px auto;
      background: #E9E9EB;
      /* overflow: hidden; */
    }
    .sms-content{
        /* margin: 32px 12px 32px auto; */
        overflow-y: auto;
        /* width: 200px; */
        /* background: #E9E9EB; */
        box-sizing: border-box;
        padding: 12px;
        font-size: 12px;
        font-weight: 400;
        color: #262626;
        line-height: 21px;
        white-space: pre-line;
        max-height: 230px;
    }
    .sms-empty-init{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      img{
        width: 120px;
        height: 120px;
        margin-top: 60px;
      }
      .sms-add-btn{
        margin-top: 24px;
      }
    }
}
</style>